另一种网页布局的方法是使用层。层与标签类似,但与标签不同的是层可以浮动在其他网页对象的上面,可以自由拖动层的位置。与其他网页元素不同的是,层具有绝对定位的功能,设置层的位置以后,这个层可以浮动在其他层的上面,不受其他层的约束。上面的层会遮挡下面元素的内容。利用层的这一特点,可以用层来实现网页的布局。
1、创建层
在 Dreamweaver CS6的设计视图中,单击需要插入层的位置,再选择“插入布局对象AP Div命令,即可插入一个层。新插入的层,默认在网页的左上角,没有边框与背景。可以在一个网页中插入多个层,实现网页的布局。
2、设置层的属性
网页中的层可以独立地设置层的背景颜色、内容、层次等属性,通过对层的设置可以实现很多网页效果单击一个层的边框,即可选择一个层,然后可以在层的“属性”面板中对层的属性进行设置。可以设置层的背景颜色、背景图像、大小、边距、可见性等属性。
3、设置层的Z轴
对层的属性设置时,除了对层的位置、大小、背景进行设置,另一个重要设置是Z轴。层的Z轴指的是层的上下关系,上面的层可以遮盖住下面层的内容。层的Z轴数字较大就会在网页的最上层在层的“属性”面板“Z轴”文本框中输入一个数字,即可设置层的Z轴属性。网页中两个层不同Z轴设置的遮盖效果。
4、层的样式
层的属性设置,是利用单一对象的CSS样式来实现的。每插入一个层,就会在样式表中新建针对这个层的样式,“CSS样式”面板中层的样式双击“CSS样式”面板中一个层的样式,即可对这个层的样式进行设置。在样式表中可以实现很多在“属性”面板中无法实现的设置。就是对层的边框属性进行设置可以对边框不同边的颜色、粗细、线型进行设置。
层进行属性设置后,即可在层中输入内容,层中可以插入表格、文本、图片等内容,层中的内容可以独立于网页的其他内容进行排版。
5、利用层实现网页的布局
分别对多个层进行属性设置,再正确放置层的位置,即可在层中输入内容,实现网页布局的排版是经过了属性设置的3个层实现的网页布局设计。在层实现的网页布局中,可以方便地实现网页布局的调整。
6、6层中的样式代码
在进行这些层的设置时,实际上是 Dreamweaver CS6自动生成CSS样式脚本,针对单一层对象进设置。下面是本例中网页层布局的HTML代码。
7、使用层制作下拉菜单
下拉菜单的主要特征是两个鼠标事件。当鼠标移动到某一个对象上时,显示菜单;当鼠标移出这对象时,菜单隐藏使用层可以在网页中制作下拉菜单。对一个对象进行设置,当鼠标移动到这一对象上时,显示菜单层;当鼠标移出时,隐藏菜单层。在用层制作网页菜单时,可以利用这一思路来实现。
(1)在 Dreamweaver中新建一个网页,在网页中加入图中布局的链接与层菜单然后需要设置两个层的属性,并且设置这两个层隐藏。
(2)需要设置鼠标事件。当有两个菜单时,需要有如下的鼠标事件。
当鼠标移动到第一个链接上时,显示第一个层隐藏第二个层。
当鼠标移动到第二个链接上时,显示第二个层隐藏第一个层。
当鼠标在这个层上单击时,隐藏所单击的层。
(3)选择需要设置事件的对象,选择“标签检査器”选项卡,单击“行为”标签。在“行为”标签中单击“添加行为”按钮*,在显示的菜单中单击“显示-隐藏元素”,弹出“显隐藏元素”对话框。
(4)在“显示-隐藏元素”对话框中,需要进行对象和显示隐藏的设置。
(5)用与前面相同的方法,对两个链接与两个层进行各自的行为设置,这样就完成了一个菜单的制作。可以在层中插入图片、链接、文本等内容实现更多的菜单功能,如图12-17所示是用层制作的菜单效果。
(6)网页中的菜单功能,实际上就是用 JavaScript对网页中对象与事件的设置。两个链接的事件分别对两个层的隐藏与显示属性进行设置,这就是菜单。
